<template>
	<view class="recommend">
		<view class="goods">
			<slot></slot>
			<view @click="todetail" class="item" v-for="item in goods">
				<image src="/static/0070078057-000000000136928577_1.jpg" mode=""></image>
				<view class="price">
					<!-- {{item.icon}} -->
					<text>￥{{item.price01}}</text>
					<text>￥{{item.price02}}</text>
				</view>
				<view class="info">{{item.info}}</view>
			</view>


		</view>
	</view>
</template>

<script>
	export default {

		methods: {
			todetail() {
				console.log('test')
				uni.navigateTo({
					url:'/pages/goods-detail/goods-detail'
				})
			}
		},
		props: {
			// data-index
		},
		data() {
			return {
				goods: [{
					icon: "/static/0070078057-000000000136928577_1.jpg",
					price01: 3099,
					price02: 4396,
					info: '创维（Skyworth）55V6 55英寸 4色4K超高清 18核 智能网络液晶电视 银色'

				}, {
					icon: "/static/0070078057-000000000136928577_1.jpg",
					price01: 3099,
					price02: 4396,
					info: '创维（Skyworth）55V6 55英寸 4色4K超高清 18核 智能网络液晶电视 银色'

				}, {
					icon: "/static/0070078057-000000000136928577_1.jpg",
					price01: 3099,
					price02: 4396,
					info: '创维（Skyworth）55V6 55英寸 4色4K超高清 18核 智能网络液晶电视 银色'

				}, {
					icon: "/static/0070078057-000000000136928577_1.jpg",
					price01: 3099,
					price02: 4396,
					info: '创维（Skyworth）55V6 55英寸 4色4K超高清 18核 智能网络液晶电视 银色'

				}, {
					icon: "/static/0070078057-000000000136928577_1.jpg",
					price01: 3099,
					price02: 4396,
					info: '创维（Skyworth）55V6 55英寸 4色4K超高清 18核 智能网络液晶电视 银色'

				}, {
					icon: "/static/0070078057-000000000136928577_1.jpg",
					price01: 3099,
					price02: 4396,
					info: '创维（Skyworth）55V6 55英寸 4色4K超高清 18核 智能网络液晶电视 银色'

				}, ]
			};
		}
	}
</script>

<style lang="scss">
	.recommend {
		width: 750rpx;
		height: 100vh;
		background-color: #EEEEEE;
		overflow: hidden;

		.goods {
			margin-top: 9rpx;
			width: 750rpx;
			// background-color: pink;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;




			.item {
				background-color: #FFFFFF;
				// background-color: red;
				width: 362rpx;
				height: 420rpx;
				margin: 0 7rpx;
				margin-bottom: 12rpx;

				// height: 350rpx;
				.price {
					color: #B50E03;
					font-size: 20rpx;

					text:nth-child(1) {
						font-size: 29rpx;
					}

					text:nth-child(2) {
						font-size: 16rpx;
						color: #ccc;
						margin-left: 10rpx;
						text-decoration: line-through;
					}
				}

				image {
					width: 100%;
					height: 58%;
					// width: 100%;
					// height: 100%;
				}

				.info {
					font-size: 20rpx;
					line-height: 40rpx;
				}
			}
		}


	}
</style>
